<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div></div> -->
    <!-- <h1></h1> -->
    <!-- <h1 class="myHeading">
        
    </h1> -->

    <!-- bq hdr ftr btn -->
    <!-- <blockquote></blockquote>
    <header></header>
    <footer></footer>
    <button></button> -->
    
    <!-- div.myclass or .myclass -->
    
    <!-- .class1.class2 -->

    <!-- div#myid or #myid -->
    <div id="id"></div>

    <!-- #myid.myclass -->
    <div id="myid" class="myclass"></div>

    <!-- h1{My titile} -->
    <h1>My titile</h1>
    
    <!-- h1.red{My red Title} -->
    <h1 class="red"> My red Title</h1>

    <!-- Nesting -->
    <!-- div>ul>li -->
    
    <!-- div>ul>li{List Item1} -->
    
    <!-- 重复 -->
    <!-- ul#navigation>li*5{List Item $} -->
    
    <!-- siblings 兄弟 -->
    <!-- div+ul+li -->

    <!-- h1.title+p.body -->

    <!-- grouping分组 -->
    <!-- div>(header>ui>li*2>a)+footer>p -->

    <!-- attrribute属性 -->
    <!-- <a href=""></a> -->
    <!-- a[href="http://baidu.com.cn"] -->

    <!-- from & input -->
    <!-- <form action="" method="get"></form> -->
    <!-- form:post -->
    <!-- <form action="" method="post"></form> -->

    <!-- inp -->
    <input type="text" name="" id="">

    <!-- DOCTYPE AND STRUCTURE -->
    <!-- ! -->

    <!-- lorem -->
    <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt architecto nobis ullam, officiis, commodi repellat quia fuga repudiandae placeat tenetur, incidunt maiores libero cupiditate cum dicta ducimus sit quibusdam error. -->

    <!-- lorem10 -->
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, animi.

    <!-- ul.myList>lorem10.item*4 -->
</body>
</html>